<template>
  <div class="w-full max-w-4xl mx-auto">
    <!-- 文章头部 -->
    <header class="mb-8">
      <div class="mb-4">
        <span class="inline-block bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm font-medium">
          JavaScript
        </span>
        <span class="text-gray-500 text-sm ml-4">2024-01-10</span>
      </div>
      <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
        JavaScript 异步编程模式详解
      </h1>
      <p class="text-xl text-gray-600 mb-6">
        深入理解 JavaScript 异步编程的核心概念和实用模式，掌握现代前端开发中的异步处理技巧
      </p>
      <div class="flex flex-wrap gap-2 mb-6">
        <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">JavaScript</span>
        <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">异步编程</span>
        <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">Promise</span>
        <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">async/await</span>
      </div>
      <div class="flex items-center text-gray-500 text-sm">
        <span>📖 阅读时间：10 分钟</span>
        <span class="mx-4">•</span>
        <span>👁️ 1,567 次阅读</span>
      </div>
    </header>

    <!-- 文章内容 -->
    <article class="prose prose-lg max-w-none">
      <!-- 引言 -->
      <div class="bg-yellow-50 border-l-4 border-yellow-400 p-6 mb-8">
        <p class="text-yellow-800 font-medium">
          异步编程是现代 JavaScript 开发的核心技能。从回调函数到 Promise，再到 async/await，
          异步编程模式在不断演进。本文将深入探讨这些模式的使用方法和最佳实践。
        </p>
      </div>

      <!-- 目录 -->
      <div class="bg-gray-50 rounded-xl p-6 mb-8">
        <h2 class="text-2xl font-bold text-gray-800 mb-4">📋 目录</h2>
        <ul class="space-y-2 text-gray-700">
          <li><a href="#basics" class="text-indigo-600 hover:text-indigo-800">1. 异步编程基础概念</a></li>
          <li><a href="#callbacks" class="text-indigo-600 hover:text-indigo-800">2. 回调函数模式</a></li>
          <li><a href="#promises" class="text-indigo-600 hover:text-indigo-800">3. Promise 模式</a></li>
          <li><a href="#async-await" class="text-indigo-600 hover:text-indigo-800">4. async/await 模式</a></li>
          <li><a href="#error-handling" class="text-indigo-600 hover:text-indigo-800">5. 错误处理策略</a></li>
          <li><a href="#patterns" class="text-indigo-600 hover:text-indigo-800">6. 实用异步模式</a></li>
          <li><a href="#best-practices" class="text-indigo-600 hover:text-indigo-800">7. 最佳实践</a></li>
        </ul>
      </div>

      <!-- 1. 异步编程基础概念 -->
      <section id="basics" class="mb-12">
        <h2 class="text-3xl font-bold text-gray-800 mb-6">1. 异步编程基础概念</h2>

        <p class="text-gray-700 mb-6">
          JavaScript 是单线程语言，但通过异步编程模式可以处理非阻塞操作，提高应用性能。
        </p>

        <div class="bg-gray-50 rounded-xl p-6 mb-6">
          <h3 class="text-xl font-semibold text-gray-800 mb-4">核心概念：</h3>
          <ul class="space-y-3 text-gray-700">
            <li><strong>同步操作</strong>：按顺序执行，会阻塞后续代码</li>
            <li><strong>异步操作</strong>：不阻塞主线程，完成后通过回调或 Promise 处理结果</li>
            <li><strong>事件循环</strong>：JavaScript 处理异步操作的机制</li>
            <li><strong>微任务</strong>：Promise、queueMicrotask 等</li>
            <li><strong>宏任务</strong>：setTimeout、setInterval、I/O 操作等</li>
          </ul>
        </div>

        <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-6">
          <h3 class="text-xl font-semibold text-yellow-800 mb-4">💡 事件循环示例</h3>
          <pre class="bg-white rounded-lg p-4 overflow-x-auto"><code class="text-sm">console.log('1') // 同步

setTimeout(() => {
  console.log('2') // 宏任务
}, 0)

Promise.resolve().then(() => {
  console.log('3') // 微任务
})

console.log('4') // 同步

// 输出顺序：1, 4, 3, 2</code></pre>
        </div>
      </section>

      <!-- 2. 回调函数模式 -->
      <section id="callbacks" class="mb-12">
        <h2 class="text-3xl font-bold text-gray-800 mb-6">2. 回调函数模式</h2>

        <div class="space-y-8">
          <!-- 基础回调 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">📞 基础回调函数</h3>
            <p class="text-gray-700 mb-4">
              回调函数是最基础的异步处理方式，但容易导致回调地狱。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>// 基础回调示例
function fetchUser(id, callback) {
  setTimeout(() => {
    const user = { id, name: 'John Doe' }
    callback(null, user)
  }, 1000)
}

fetchUser(1, (error, user) => {
  if (error) {
    console.error('Error:', error)
    return
  }
  console.log('User:', user)
})

// 回调地狱示例
fetchUser(1, (error, user) => {
  if (error) return console.error(error)
  
  fetchUserPosts(user.id, (error, posts) => {
    if (error) return console.error(error)
    
    fetchPostComments(posts[0].id, (error, comments) => {
      if (error) return console.error(error)
      console.log('Comments:', comments)
    })
  })
})</code></pre>
            </div>
          </div>

          <!-- 错误处理 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">⚠️ 回调函数的错误处理</h3>
            <p class="text-gray-700 mb-4">
              回调函数使用错误优先（Error-First）模式处理错误。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>// 错误优先模式
function readFile(path, callback) {
  // 模拟文件读取
  setTimeout(() => {
    if (path === 'error.txt') {
      callback(new Error('File not found'), null)
    } else {
      callback(null, 'File content')
    }
  }, 1000)
}

readFile('data.txt', (error, data) => {
  if (error) {
    console.error('读取失败:', error.message)
    return
  }
  console.log('文件内容:', data)
})</code></pre>
            </div>
          </div>
        </div>
      </section>

      <!-- 3. Promise 模式 -->
      <section id="promises" class="mb-12">
        <h2 class="text-3xl font-bold text-gray-800 mb-6">3. Promise 模式</h2>

        <div class="space-y-8">
          <!-- Promise 基础 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">🤝 Promise 基础用法</h3>
            <p class="text-gray-700 mb-4">
              Promise 提供了更优雅的异步处理方式，避免了回调地狱。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>// Promise 基础示例
function fetchUser(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id > 0) {
        resolve({ id, name: 'John Doe' })
      } else {
        reject(new Error('Invalid user ID'))
      }
    }, 1000)
  })
}

// 使用 Promise
fetchUser(1)
  .then(user => {
    console.log('User:', user)
    return fetchUserPosts(user.id)
  })
  .then(posts => {
    console.log('Posts:', posts)
  })
  .catch(error => {
    console.error('Error:', error)
  })</code></pre>
            </div>
          </div>

          <!-- Promise 静态方法 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">🔧 Promise 静态方法</h3>
            <p class="text-gray-700 mb-4">
              Promise 提供了多个静态方法用于处理多个异步操作。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>// Promise.all - 并行执行
const promises = [
  fetchUser(1),
  fetchUser(2),
  fetchUser(3)
]

Promise.all(promises)
  .then(users => {
    console.log('All users:', users)
  })
  .catch(error => {
    console.error('One of the requests failed:', error)
  })

// Promise.race - 竞态
Promise.race([
  fetchUser(1),
  new Promise((_, reject) => 
    setTimeout(() => reject(new Error('Timeout')), 5000)
  )
])
  .then(user => console.log('First result:', user))
  .catch(error => console.error('Error:', error))

// Promise.allSettled - 等待所有完成
Promise.allSettled(promises)
  .then(results => {
    results.forEach(result => {
      if (result.status === 'fulfilled') {
        console.log('Success:', result.value)
      } else {
        console.log('Error:', result.reason)
      }
    })
  })</code></pre>
            </div>
          </div>

          <!-- Promise 链式调用 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">⛓️ Promise 链式调用</h3>
            <p class="text-gray-700 mb-4">
              通过链式调用可以优雅地处理多个异步操作。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>// 链式调用示例
fetchUser(1)
  .then(user => {
    console.log('获取用户:', user)
    return fetchUserPosts(user.id)
  })
  .then(posts => {
    console.log('获取文章:', posts)
    return fetchPostComments(posts[0].id)
  })
  .then(comments => {
    console.log('获取评论:', comments)
  })
  .catch(error => {
    console.error('操作失败:', error)
  })
  .finally(() => {
    console.log('操作完成')
  })</code></pre>
            </div>
          </div>
        </div>
      </section>

      <!-- 4. async/await 模式 -->
      <section id="async-await" class="mb-12">
        <h2 class="text-3xl font-bold text-gray-800 mb-6">4. async/await 模式</h2>

        <div class="space-y-8">
          <!-- 基础用法 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">⚡ async/await 基础</h3>
            <p class="text-gray-700 mb-4">
              async/await 让异步代码看起来像同步代码，更易读易维护。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>// async/await 基础示例
async function getUserData(id) {
  try {
    const user = await fetchUser(id)
    console.log('用户信息:', user)
    
    const posts = await fetchUserPosts(user.id)
    console.log('用户文章:', posts)
    
    const comments = await fetchPostComments(posts[0].id)
    console.log('文章评论:', comments)
    
    return { user, posts, comments }
  } catch (error) {
    console.error('获取数据失败:', error)
    throw error
  }
}

// 调用异步函数
getUserData(1)
  .then(data => console.log('完整数据:', data))
  .catch(error => console.error('错误:', error))</code></pre>
            </div>
          </div>

          <!-- 并行执行 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">🚀 并行执行优化</h3>
            <p class="text-gray-700 mb-4">
              使用 Promise.all 和 async/await 结合实现并行执行。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>// 并行执行示例
async function getUserDataParallel(id) {
  try {
    const user = await fetchUser(id)
    
    // 并行获取文章和评论
    const [posts, comments] = await Promise.all([
      fetchUserPosts(user.id),
      fetchPostComments(user.id)
    ])
    
    return { user, posts, comments }
  } catch (error) {
    console.error('获取数据失败:', error)
    throw error
  }
}

// 批量处理
async function processUsers(userIds) {
  const promises = userIds.map(id => fetchUser(id))
  const users = await Promise.all(promises)
  
  return users.filter(user => user.active)
}</code></pre>
            </div>
          </div>

          <!-- 错误处理 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">🛡️ async/await 错误处理</h3>
            <p class="text-gray-700 mb-4">
              使用 try-catch 和错误边界处理异步错误。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>// 错误处理示例
async function safeFetch(url) {
  try {
    const response = await fetch(url)
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }
    
    return await response.json()
  } catch (error) {
    console.error('请求失败:', error)
    return null
  }
}

// 错误边界模式
async function withErrorBoundary(fn) {
  try {
    return await fn()
  } catch (error) {
    console.error('操作失败:', error)
    // 可以在这里添加错误上报逻辑
    return null
  }
}

// 使用错误边界
const result = await withErrorBoundary(() => fetchUser(1))</code></pre>
            </div>
          </div>
        </div>
      </section>

      <!-- 5. 错误处理策略 -->
      <section id="error-handling" class="mb-12">
        <h2 class="text-3xl font-bold text-gray-800 mb-6">5. 错误处理策略</h2>

        <div class="space-y-8">
          <!-- 统一错误处理 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">🎯 统一错误处理</h3>
            <p class="text-gray-700 mb-4">
              建立统一的错误处理机制，提高代码的可维护性。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>// 自定义错误类
class ApiError extends Error {
  constructor(message, status, code) {
    super(message)
    this.name = 'ApiError'
    this.status = status
    this.code = code
  }
}

// 统一错误处理函数
function handleError(error) {
  if (error instanceof ApiError) {
    console.error(`API错误 ${error.status}: ${error.message}`)
    // 可以显示用户友好的错误信息
  } else if (error.name === 'NetworkError') {
    console.error('网络连接失败')
  } else {
    console.error('未知错误:', error)
  }
}

// 使用统一错误处理
async function fetchData() {
  try {
    const response = await fetch('/api/data')
    if (!response.ok) {
      throw new ApiError('数据获取失败', response.status, 'FETCH_ERROR')
    }
    return await response.json()
  } catch (error) {
    handleError(error)
    throw error
  }
}</code></pre>
            </div>
          </div>

          <!-- 重试机制 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">🔄 重试机制</h3>
            <p class="text-gray-700 mb-4">
              实现智能重试机制，提高应用的稳定性。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>// 重试函数
async function retry(fn, maxRetries = 3, delay = 1000) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      return await fn()
    } catch (error) {
      if (i === maxRetries - 1) {
        throw error
      }
      
      console.log(`重试 ${i + 1}/${maxRetries}: ${error.message}`)
      await new Promise(resolve => setTimeout(resolve, delay * (i + 1)))
    }
  }
}

// 使用重试机制
const data = await retry(
  () => fetch('/api/data').then(res => res.json()),
  3,
  1000
)

// 指数退避重试
async function exponentialBackoff(fn, maxRetries = 5) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      return await fn()
    } catch (error) {
      if (i === maxRetries - 1) throw error
      
      const delay = Math.pow(2, i) * 1000
      console.log(`等待 ${delay}ms 后重试...`)
      await new Promise(resolve => setTimeout(resolve, delay))
    }
  }
}</code></pre>
            </div>
          </div>
        </div>
      </section>

      <!-- 6. 实用异步模式 -->
      <section id="patterns" class="mb-12">
        <h2 class="text-3xl font-bold text-gray-800 mb-6">6. 实用异步模式</h2>

        <div class="space-y-8">
          <!-- 防抖和节流 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">⏱️ 防抖和节流</h3>
            <p class="text-gray-700 mb-4">
              使用防抖和节流优化频繁的异步操作。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>// 防抖函数
function debounce(fn, delay) {
  let timeoutId
  return function (...args) {
    clearTimeout(timeoutId)
    timeoutId = setTimeout(() => fn.apply(this, args), delay)
  }
}

// 节流函数
function throttle(fn, delay) {
  let lastCall = 0
  return function (...args) {
    const now = Date.now()
    if (now - lastCall >= delay) {
      lastCall = now
      fn.apply(this, args)
    }
  }
}

// 使用示例
const debouncedSearch = debounce(async (query) => {
  const results = await searchAPI(query)
  updateResults(results)
}, 300)

const throttledScroll = throttle(() => {
  console.log('滚动事件')
}, 100)</code></pre>
            </div>
          </div>

          <!-- 异步队列 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">📋 异步队列</h3>
            <p class="text-gray-700 mb-4">
              实现异步任务队列，控制并发数量。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>// 异步队列类
class AsyncQueue {
  constructor(concurrency = 1) {
    this.concurrency = concurrency
    this.running = 0
    this.queue = []
  }

  async add(task) {
    return new Promise((resolve, reject) => {
      this.queue.push({ task, resolve, reject })
      this.run()
    })
  }

  async run() {
    if (this.running >= this.concurrency || this.queue.length === 0) {
      return
    }

    this.running++
    const { task, resolve, reject } = this.queue.shift()

    try {
      const result = await task()
      resolve(result)
    } catch (error) {
      reject(error)
    } finally {
      this.running--
      this.run()
    }
  }
}

// 使用异步队列
const queue = new AsyncQueue(2)

const tasks = [
  () => fetchUser(1),
  () => fetchUser(2),
  () => fetchUser(3),
  () => fetchUser(4)
]

const results = await Promise.all(
  tasks.map(task => queue.add(task))
)</code></pre>
            </div>
          </div>

          <!-- 缓存模式 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">💾 异步缓存模式</h3>
            <p class="text-gray-700 mb-4">
              实现异步操作的缓存机制，避免重复请求。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>// 异步缓存
class AsyncCache {
  constructor() {
    this.cache = new Map()
  }

  async get(key, fetcher) {
    if (this.cache.has(key)) {
      return this.cache.get(key)
    }

    const promise = fetcher()
    this.cache.set(key, promise)

    try {
      const result = await promise
      return result
    } catch (error) {
      this.cache.delete(key)
      throw error
    }
  }

  clear() {
    this.cache.clear()
  }
}

// 使用缓存
const cache = new AsyncCache()

async function getUser(id) {
  return cache.get(`user-${id}`, () => fetchUser(id))
}

// 带过期时间的缓存
class TimedCache {
  constructor(ttl = 60000) {
    this.cache = new Map()
    this.ttl = ttl
  }

  async get(key, fetcher) {
    const cached = this.cache.get(key)
    
    if (cached && Date.now() - cached.timestamp < this.ttl) {
      return cached.data
    }

    const data = await fetcher()
    this.cache.set(key, {
      data,
      timestamp: Date.now()
    })

    return data
  }
}</code></pre>
            </div>
          </div>
        </div>
      </section>

      <!-- 7. 最佳实践 -->
      <section id="best-practices" class="mb-12">
        <h2 class="text-3xl font-bold text-gray-800 mb-6">7. 最佳实践</h2>

        <div class="space-y-8">
          <!-- 性能优化 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">⚡ 性能优化建议</h3>
            <p class="text-gray-700 mb-4">
              遵循最佳实践，提高异步代码的性能和可维护性。
            </p>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
              <div class="bg-white border rounded-lg p-4">
                <h4 class="font-semibold text-gray-800 mb-2">✅ 推荐做法</h4>
                <ul class="space-y-2 text-sm text-gray-700">
                  <li>• 使用 async/await 替代回调</li>
                  <li>• 并行执行独立的异步操作</li>
                  <li>• 实现适当的错误处理</li>
                  <li>• 使用防抖和节流优化</li>
                  <li>• 缓存重复的异步操作</li>
                  <li>• 设置合理的超时时间</li>
                </ul>
              </div>
              <div class="bg-white border rounded-lg p-4">
                <h4 class="font-semibold text-gray-800 mb-2">❌ 避免做法</h4>
                <ul class="space-y-2 text-sm text-gray-700">
                  <li>• 嵌套过深的回调函数</li>
                  <li>• 忽略错误处理</li>
                  <li>• 串行执行可并行的操作</li>
                  <li>• 不设置超时时间</li>
                  <li>• 重复发起相同请求</li>
                  <li>• 在循环中使用 await</li>
                </ul>
              </div>
            </div>
          </div>

          <!-- 代码示例 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">📝 完整示例</h3>
            <p class="text-gray-700 mb-4">
              一个完整的异步操作示例，展示最佳实践。
            </p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>// 完整的异步操作示例
class UserService {
  constructor() {
    this.cache = new AsyncCache()
    this.queue = new AsyncQueue(3)
  }

  async getUserWithPosts(userId) {
    try {
      // 并行获取用户信息和文章
      const [user, posts] = await Promise.all([
        this.getUser(userId),
        this.getUserPosts(userId)
      ])

      // 获取每篇文章的评论（限制并发数）
      const postsWithComments = await Promise.all(
        posts.map(post => 
          this.queue.add(() => this.getPostComments(post.id))
        )
      )

      return {
        user,
        posts: posts.map((post, index) => ({
          ...post,
          comments: postsWithComments[index]
        }))
      }
    } catch (error) {
      console.error('获取用户数据失败:', error)
      throw new ApiError('获取用户数据失败', 500, 'USER_FETCH_ERROR')
    }
  }

  async getUser(id) {
    return this.cache.get(`user-${id}`, () => 
      this.apiCall(`/users/${id}`)
    )
  }

  async getUserPosts(userId) {
    return this.apiCall(`/users/${userId}/posts`)
  }

  async getPostComments(postId) {
    return this.apiCall(`/posts/${postId}/comments`)
  }

  async apiCall(url) {
    const controller = new AbortController()
    const timeoutId = setTimeout(() => controller.abort(), 5000)

    try {
      const response = await fetch(url, {
        signal: controller.signal
      })

      if (!response.ok) {
        throw new ApiError(`HTTP ${response.status}`, response.status)
      }

      return await response.json()
    } finally {
      clearTimeout(timeoutId)
    }
  }
}</code></pre>
            </div>
          </div>
        </div>
      </section>

      <!-- 总结 -->
      <section class="mb-12">
        <div class="bg-gradient-to-r from-yellow-500 to-orange-600 text-white rounded-xl p-8">
          <h2 class="text-3xl font-bold mb-4">总结</h2>
          <p class="text-lg opacity-90 mb-4">
            JavaScript 异步编程是现代前端开发的核心技能。从回调函数到 Promise，再到 async/await，
            每种模式都有其适用场景。掌握这些模式并遵循最佳实践，可以写出更高效、更可维护的异步代码。
          </p>
          <div class="flex flex-wrap gap-4">
            <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">异步编程</span>
            <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">Promise</span>
            <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">async/await</span>
            <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">错误处理</span>
            <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">性能优化</span>
            <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">最佳实践</span>
          </div>
        </div>
      </section>
    </article>

    <!-- 文章底部 -->
    <footer class="border-t pt-8 mt-12">
      <div class="flex flex-wrap justify-between items-center mb-6">
        <div class="flex items-center space-x-4">
          <button class="flex items-center space-x-2 text-gray-600 hover:text-yellow-600 transition-colors">
            <span>👍</span>
            <span>有用 (189)</span>
          </button>
          <button class="flex items-center space-x-2 text-gray-600 hover:text-yellow-600 transition-colors">
            <span>💬</span>
            <span>评论 (67)</span>
          </button>
          <button class="flex items-center space-x-2 text-gray-600 hover:text-yellow-600 transition-colors">
            <span>📤</span>
            <span>分享</span>
          </button>
        </div>
        <div class="flex items-center space-x-4">
          <span class="text-gray-500 text-sm">阅读时间：10 分钟</span>
          <span class="text-gray-500 text-sm">•</span>
          <span class="text-gray-500 text-sm">1,567 次阅读</span>
        </div>
      </div>

      <!-- 相关文章 -->
      <div class="bg-gray-50 rounded-xl p-6">
        <h3 class="text-xl font-semibold text-gray-800 mb-4">📚 相关文章</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <NuxtLink to="/blog/vuejs-development-tips"
            class="block p-4 bg-white rounded-lg hover:shadow-md transition-shadow">
            <h4 class="font-semibold text-gray-800 mb-2">Vue.js 开发技巧</h4>
            <p class="text-gray-600 text-sm">掌握 Vue.js 开发中的实用技巧和最佳实践</p>
          </NuxtLink>
          <NuxtLink to="/blog/css-grid-layout-guide"
            class="block p-4 bg-white rounded-lg hover:shadow-md transition-shadow">
            <h4 class="font-semibold text-gray-800 mb-2">CSS Grid 布局实战技巧</h4>
            <p class="text-gray-600 text-sm">深入探讨 CSS Grid 布局的核心概念和实用技巧</p>
          </NuxtLink>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
useHead({
  title: 'JavaScript 异步编程模式详解 - 我的博客',
  meta: [
    { name: 'description', content: '深入理解 JavaScript 异步编程的核心概念和实用模式，掌握现代前端开发中的异步处理技巧。' },
    { name: 'keywords', content: 'JavaScript, 异步编程, Promise, async/await, 前端开发, 最佳实践' }
  ]
})
</script>